{{ define "title" }}xbar, the BitBar reboot{{ end }}
{{ define "head" }}
	<meta name='description' content='xbar lets you put the output of any executable script or program into your macOS menu bar'>
	<meta name='author' content='Mat Ryer + contributors'>
	<meta name='keywords' content='macos,menubar,xbar,bitbar'>
	<meta itemprop='image' content='https://xbarapp.com/public/img/xbar-menu-preview.png'>
	<meta itemprop='name' content='xbar, the BitBar reboot'>
	<meta itemprop='description' content='xbar lets you put the output of any executable script or program into your macOS menu bar'>
	<meta name='twitter:card' content='summary_large_image'>
	<meta name='twitter:title' content='xbar, the BitBar reboot'>
	<meta name='twitter:description' content='xbar lets you put the output of any executable script or program into your macOS menu bar'>
	<meta name='twitter:image' content='https://xbarapp.com/public/img/xbar-menu-preview.png'>
	<meta name='twitter:creator' content='matryer'>
	<meta property='og:title' content='xbar, the BitBar reboot'>
	<meta property='og:description' content='xbar lets you put the output of any executable script or program into your macOS menu bar'>
	<meta property='og:url' content='https://xbarapp.com/'>
	<meta property='og:site_name' content='xbar lets you put anything into your macOS menu bar'>
	<meta property='og:type' content='article'>
	<meta property='og:image' content='https://xbarapp.com/public/img/xbar-menu-preview.png'>
	<link rel='apple-touch-icon' sizes='180x180' href='/public/img/xbar-2048.png'>
	<link rel='icon' type='image/png' sizes='32x32' href='/public/img/xbar-2048.png'>
	<link rel='shortcut icon' href='/public/img/xbar-2048.png'>
	<meta name='msapplication-TileColor' content='#0f0c29'>
	<meta name='msapplication-config' content='/public/browserconfig.xml'>
	<meta name='theme-color' content='#0f0c29'>
{{ end }}
{{ define "body" }}
	<p class='text-white p-16 max-w-md'>
		There is no good reason why you should ever see this.
		But here we are.
		Maybe you can let me know by Tweeting me <a href='https://twitter.com/matryer' target='twitter'>@matryer</a>,
		to let me know.
		<br><br>
		Thanks,<br>
		Mat.
	</p>
{{ end }}
{{ define "_main" }}
<!doctype html>
<html lang='en' style='background: #111;'>
	<head>
		<meta charset='utf-8' />
		<meta name='viewport' content='width=device-width' />
		<meta http-equiv='X-UA-Compatible' content='ie=edge'>
		<title>{{ template "title" . }}</title>
		<link rel='stylesheet' href='/public/css/xbar.css?cb={{ .Version }}'>
		<link rel='preconnect' href='https://fonts.gstatic.com'>
		<link rel='preconnect' href='https://fonts.googleapis.com'>
		<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500&display=swap'>
		{{ template "head" . }}
		<!-- used to get a sense of how people are using the site,
			not for tracking your every move. -->
		<script async defer data-domain="xbarapp.com" src="https://plausible.io/js/plausible.js"></script>
	</head>
	<body>
		<header class='flex flex-col'>
			<div class='container mx-auto'>
				<div class='flex items-center space-x-8 p-8 text-white'>
					<a href='/' class='inline-block py-2 text-2xl flex items-center space-x-2 font-bold'>
						<img alt='xbar logo: a circle with three dots inside it' src='/public/img/xbar-2048.png' style='width:48px;height:48px;' />
						<span>xbar</span>
					</a>
					<div class='flex-grow'></div>
					<div>
						<a href='/docs/index.html' class='text-white px-3 py-2 whitespace-nowrap'>Docs</a>
					</div>
					<div>
						<a 
							target='github'
							href='https://github.com/sponsors/matryer' 
							class='text-white px-4 py-2 whitespace-nowrap'
						><span class='mr-1'>💜</span> Sponsor</a>
					</div>
					<div class='hidden md:block'>
						<a 
							target='github'
							href='/dl' 
							class='rounded bg-white text-gray-800 hover:text-black px-4 py-2 shadow hover:shadow-lg whitespace-nowrap'
						>Download xbar for macOS</a>
					</div>
				</div>
			</div>
		</header>
		<div id='menubar' class='text-white whitespace-nowrap overflow-hidden flex flex-wrap justify-end items-center text-right'>
			{{ $CurrentCategoryPath := .CurrentCategoryPath }}
			{{ range $k, $v := .Categories }}
				<a 
					{{ if eq $CurrentCategoryPath $v.Path }} class='rounded selected' {{ end }}
					href='/docs/plugins/{{ $k }}.html'
				>
					{{ $v.Text }}
				</a>
			{{ end }}
		</div>
		{{ template "body" . }}
		<footer class='container mx-auto text-white text-lg opacity-75 mt-8'>
			<div class='text-center p-16 pb-24'>
				<p>
					<div>
						<a target='github' class='hover:underline hover:text-white' href='https://github.com/matryer/xbar'>GitHub project</a>
						•
						<a target='github' class='hover:underline hover:text-white' href='https://github.com/matryer/xbar-plugins/blob/main/CONTRIBUTING.md'>Writing plugins guide</a>
					</div>
					<div class='mt-8'>
						<a target='github' class='hover:underline' href='https://github.com/matryer/xbar/blob/master/LICENSE.txt'>MIT License</a> • <a target='twitter' class='hover:underline hover:text-white' href='https://twitter.com/matryer'>@matryer</a>
					</div>
					<div class='opacity-50 mt-2 text-sm mt-8'>
						Updated {{ .LastUpdatedFormatted }} - <code>{{ .Version }}</code>
					</div>
				</p>
			</div>
		</footer>
	</body>
</html>
{{ end }}
{{ define "plugins" }}
	{{ if . }}
		<div class='container mx-auto md:grid md:grid-cols-2 lg:grid-cols-3 gap-4'>
			{{ range . }}
				<div class='flex flex-col p-8 bg-black bg-opacity-25 text-white rounded-lg mt-1 md:mt-0'>
					<p>
						<a
							class='hover:underline'
							href='/docs/plugins/{{ .Path }}.html'
						><strong class='text-xl'>{{ .Title }}</strong></a>
					</p>
					{{ if .Desc }}{{ if not .ImageURL }}&mdash;{{ .Desc }}{{ end }}{{ end }}
					{{ if .ImageURL }}
						<div class='md:hidden my-1'>
							{{if ne .ImageURL "https://xbarapp.com/public/img/xbar-2048.png"}}
								<a href='/docs/plugins/{{ .Path }}.html'>
									<img 
										class='plugin-image max-w-full' 
										src='{{ .ImageURL }}'
										onerror='this.onerror=null;this.style.display="none";'
									>
								</a>
							{{ end }}
							<p class='nice-wrapping flex-grow md:text-base'>
								{{ .Desc }}
							</p>
						</div>
						<div class='hidden md:flex flex-grow space-x-4 items-center p-4'>
							<div class='max-w-md md:w-1/3'>
								<a href='/docs/plugins/{{ .Path }}.html'>
									<img 
										class='plugin-image max-w-full' 
										src='{{ .ImageURL }}'
										onerror='this.onerror=null;this.style.display="none";'
									>
								</a>
							</div>
							<div class='md:w-2/3 text-sm flex-grow flex flex-col mt-3 md:mt-0'>
								<div class='nice-wrapping flex-grow text-xl md:text-base'>
									{{ .NiceDesc }}
								</div>
							</div>
						</div>
						{{ range .Authors }}
							<div class='text-center md:text-right text-sm mt-3 md:mt-0'>
								<a href='/docs/contributors/{{ .GitHubUsername }}.html'>
									<span class='nice-wrapping block md:inline mb-1'>
										<strong>{{ .Name }}</strong>
										{{ if .GitHubUsername }}
											(@{{ .GitHubUsername }})
										{{ end }}
									</span>
									{{ if .ImageURL }}
										<img class='w-8 h-8 rounded-full inline' src='{{ .ImageURL }}'>
									{{ end }}
								</a>
							</div>
						{{ end }}
					{{ else }}
						<a
							class='text-sm'
							href='/docs/plugins/{{ .Path }}.html#source-code'
						><code>{{ .Filename }}</code></a>
					{{ end }}
				</div>
			{{ end }}
		</div>
	{{ end }}
{{ end }}
{{ define "support" }}
	<div class='container mx-auto flex flex-col justify-center items-center text-white m-16'>
		<h2 class='p-8 text-center text-white text-3xl mt-8 font-bold'>
			<span class='opacity-75'>
				<span class='text-5xl pb-2'>💜</span><br>
				Show your support<br>
				by
			</span> Sponsoring xbar
		</h2>
		<p class='p-8 pt-0 text-center text-white text-2xl opacity-75 max-w-md'>
			Every contribution makes a <strong>big difference</strong>
			<br><br>
			If you use xbar, please consider
			<a target='github' class='underline' href='https://github.com/sponsors/matryer'>sponsoring it on GitHub</a>
		</p>
	</div>
{{ end }}
